<template>
  <div v-if="data" class="select-wrapper">
    <select v-if="hldata" class="ui search dropdown" :class="[fname,size,_editType]">
      <option value="">{{placeholder}}</option>
      <option v-for=" item in hldata" :value="item[_keyname]">{{item.title}}</option>
    </select>
    <div class="ui label" v-if="label">{{label}}</div>
    <i class="ui icon refresh" @click="refresh"></i>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import _ from 'lodash';
  import in_array from 'in_array';

  export default {
    created() {
      this.setHldata()
    },
    mounted() {


      this.$nextTick(() => {
        this.jsinit()

        //设置默认值如果有的话
        let ctl = this.$store.state.global.current_ctl
        let is_list = this.$store.state.global.is_list
        let fname = this.fname

        if (this.$store.state.list.filterData[ctl] && this.$store.state.list.filterData[ctl][fname] && is_list) {
          let stype = this.$store.state.list.filterData[ctl][fname];
          //this.$set(this.$props,'val',stype);

          this.setSelect(stype);
        } else {
          this.setSelect()
        }


      })
    },

    data() {
      return {
        hldata: null,
        newVal: null
      }
    },
    watch: {
      val: function (val, old) {
        if (val != old && val != this.newVal) {
          this.setSelect()
        }
      },
      data: function (val) {
        if (val)
          this.setHldata();
      }

    },
    methods: {
      setHldata() {
        if (util.isArray(this.data)) {
          this.placeholder = this.placeholder || '请选择'

          let rs = _.findIndex(this.data, (o) => {
            let keys = Object.keys(o);
            return keys.contains('id') && keys.contains('title');
          })
          if (rs == -1) {
            this.hldata = this.data.map((title, id) => {
              return {
                id, title
              }
            })
          } else {
            this.hldata = this.data
          }
        }

      },
      refresh() {
        $(this.selector).dropdown('clear');
      },
      setSelect(sval) {

        let val = sval || this.val


        if (val !== null && val !== undefined && in_array(val, this.allowedVals)) {

          $(this.selector).dropdown('set selected', val);
          let text = $(this.selector).dropdown('get text');

          this.$emit('selectValsChange', val, this.fname, text)

        } else
          $(this.selector).dropdown('clear');
      },
      jsinit() {
        let _this = this
        $(this.selector).dropdown({
          allowAdditions: true,
          onChange(value, text, $selectedItem){
            _this.newVal = value;
            _this.$emit('selectValsChange', value, _this.fname, text)
            this.blur()
          }
        });
//        this.$nextTick(()=> {
//
//
//        })
      }
    },
    computed: {
      ctl(){
        return this.$route.query.ctl;
      },
      selector(){
        return `.ui.dropdown.${this.fname}.${this._editType}`
      },
      allowedVals(){
        let arr = this.hldata.map(item => item[this._keyname]);
//        switch (this.ctl) {
//          case 'Menu':
//            arr = _.concat(arr, this.hldata.map(item => item[this._keyname]))
//            break;
//        }
        return arr;
      },
      _editType(){
        return this.editType || 'EditType_3';
      },
      _keyname(){
        return this.keyname || 'id';
      }
    },
    props: ['fname', 'data', 'val', 'editType', 'placeholder', 'size', 'label', 'keyname']
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
  .select-wrapper {
    width: 234px;
    position: relative;
    .ui.icon.refresh {
      // position: absolute;
      // top: 50%;
      // right: 10px;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.6);
    }
  }
</style>
